<template>
  <div class="ocBody wap">
    <x-header v-if="!this.$fromApp(this)" class="whiteTheme fixedHead" :left-options="{backText: ''}">订单中心</x-header>
    <div class="main">
      <scroller class="scrollerBox" :on-refresh="refresh" :on-infinite="infinite" ref="my_scroller">
        <ul class=" flex-direction-column display-flex align-items-center justify-content-flex-center">
          <li class="listItem flex-direction-column display-flex align-items-center justify-content-flex-center"
              v-for="(item, index) in dataArr" :key="index">
            <p class="msgTime">{{item.creTime}}</p>
            <div @click="goOrderDetial(item)" class="itemContent">
              <p style="color: #333333;font-size: 16px;font-weight: bold">{{item.orderStateMessageDesc}}</p>
              <span style="color: #999999; font-size: 14px">{{item.orderStateMessageContent}}</span>
            </div>
          </li>
        </ul>
      </scroller>
    </div>
  </div>
</template>

<script>
    export default {
        name: "orderCenter",
      data(){
          return{
            pageNum:1,
            noData:false,
            dataArr:[]
          }
      },
      mounted(){
          this.getData(0);
      },
      methods:{
          getData(scrollType,done){
            this.$ajax.get('message/order_message/list',(res)=>{
              if(res.code == '200'){
                this.$refs.my_scroller&&this.$refs.my_scroller.finishPullToRefresh();
                if(0==scrollType){
                  this.dataArr = res.data;
                }else{
                  if(res.data&&res.data!=''){
                    this.dataArr = this.dataArr.concat(res.data);
                  }else {
                    this.noData = true;
                  }
                }

                if(typeof(done) == "function"){
                  done();
                }
              }
            },{pageSize:10,pageNo:this.pageNum});
          },
        goOrderDetial(val){
          if(val.userType == 1){
            if(this.$fromApp(this)){
              this.$callJava({url:this.$webUrl+"purchase/orderDetails?from=app&id="+val.saleOrderId,title:""});
            }else{
              this.$router.push({path:'/purchase/orderDetails',query:{id:val.saleOrderId}})
            }
          }else{
            if(this.$fromApp(this)){
              this.$callJava({url:this.$webUrl+"order/saleOrderDetails?from=app&id="+val.saleOrderId,title:""});
            }else{
              this.$router.push({path:'/order/saleOrderDetails',query:{id:val.saleOrderId}})
            }
          }

          // if(this.$fromApp(this)){
          //   this.$router.push({path:'/purchase/myPurchase',query:{id:val.saleOrderId,from:'app'}})
          // }else{
          //   this.$router.push({path:'/purchase/myPurchase',query:{id:val.saleOrderId}})
          // }

        },
        refresh(){
          this.pageNum = 1;
          this.noData = false;
          this.getData(0);
        },
        infinite(done){
          if(!this.noData){
            this.pageNum++;
            this.getData(1,done)
          }else{
            this.$refs.my_scroller&&this.$refs.my_scroller.finishInfinite(true)
          }
        }
      }
    }
</script>

<style lang="less" type="text/less" scoped>
  ul>li{
    list-style: none;
  }
  .ocBody{
    .scrollerBox{
      .listItem{
        padding-top: .5rem;
        .msgTime{
          color: #999999;
          font-size: 12px;
          margin-bottom: .2rem;
        }
        .itemContent{
          width: 6.3rem;
          background-color: #ffffff;
          border-radius: .16rem;
          padding: .3rem;
        }
      }
    }
  }
</style>
